<template>
  <div class="query-container" ref="container">
    <div class="form">
      <el-form ref="form" :model="form" size="small" label-width="120px" label-suffix="：">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="下拉框">
              <el-select v-model="form.select">
                <el-option label="选择1" value="1"></el-option>
                <el-option label="选择2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下拉框2">
              <el-select v-model="form.select2">
                <el-option label="选择1" value="1"></el-option>
                <el-option label="选择2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下拉框3">
              <el-select v-model="form.select3">
                <el-option label="选择1" value="1"></el-option>
                <el-option label="选择2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下拉框4">
              <el-select v-model="form.select4">
                <el-option label="选择1" value="1"></el-option>
                <el-option label="选择2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="输入框">
              <el-input v-model="form.input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="small" @click="query">查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-pagination">
      <div class="table" v-if="height !== 0">
        <el-table :data="tableData" :height="height" size="small" border stripe>
          <el-table-column fixed prop="index" label="序号" width="120"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="work" label="职业"></el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="look">查看</el-button>
              <el-button type="text" size="small" @click="edit">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination txt-right">
        <el-pagination ref="pagination" :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes,prev,next,pager,jumper" @size-change="changePageSize" @current-change="changePage"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "tableTest",
    data() {
      return {
        form: {
          input: '',
          select: '',
          select2: '',
          select3: '',
          select4: '',
        },
        tableData: [
          {
            index: 1,
            name: 'clw1',
            age: 17,
            work: 'worker1'
          },
          {
            index: 2,
            name: 'clw2',
            age: 18,
            work: 'worker2'
          },
          {
            index: 1,
            name: 'clw1',
            age: 17,
            work: 'worker1'
          },
          {
            index: 2,
            name: 'clw2',
            age: 18,
            work: 'worker2'
          },
          {
            index: 1,
            name: 'clw1',
            age: 17,
            work: 'worker1'
          },
          {
            index: 2,
            name: 'clw2',
            age: 18,
            work: 'worker2'
          },
          {
            index: 1,
            name: 'clw1',
            age: 17,
            work: 'worker1'
          },
          {
            index: 2,
            name: 'clw2',
            age: 18,
            work: 'worker2'
          },
          {
            index: 1,
            name: 'clw1',
            age: 17,
            work: 'worker1'
          },
          {
            index: 2,
            name: 'clw2',
            age: 18,
            work: 'worker2'
          },
          {
            index: 2,
            name: 'clw2',
            age: 18,
            work: 'worker2'
          },
          {
            index: 2,
            name: 'clw2',
            age: 18,
            work: 'worker2'
          },
          {
            index: 2,
            name: 'clw2',
            age: 18,
            work: 'worker2'
          },
          {
            index: 2,
            name: 'clw2',
            age: 18,
            work: 'worker2'
          },
          {
            index: 2,
            name: 'clw2',
            age: 18,
            work: 'worker2'
          },
        ],
        height: 0,
        pageSize: 10,
        page: 1,
        total: 0,
      }
    },
    methods: {
      look() {},
      edit() {},
      query() {},
      reset() {},
      changePageSize(val) {
        this.pageSize = val;
        this.getTableData()
      },
      changePage(val) {
        this.page = val;
        this.getTableData()
      },
      getTableData() {},
      onResize() {
        let containerHeight = this.$refs.container.clientHeight;
        let formHeight = this.$refs.form.$el.clientHeight;
        let paginationHeight = this.$refs.pagination.$el.clientHeight;
        this.$set(this, 'height', containerHeight - formHeight - paginationHeight - 30)
        // this.height = ;
      }
    },
    mounted() {
      this.onResize();
    }
  }
</script>

<style scoped>
.query-container{
  height: 100%;
  padding: 10px;
  border: 10px solid #e9e9ef;
  box-sizing: border-box;
}
  .pagination{
    margin-top: 10px;
  }
</style>
